<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- 禁止用户缩放 -->
    <!--<meta name="viewport" content="width=device_width, initial-scale=1">-->
    <title>使用百度地图</title>


    <script type="text/javascript">
        function initialize() {
            var mp = new BMap.Map('map');
            var point = new BMap.Point(121.491, 31.233);
            mp.centerAndZoom(point, 11);

            //var marker = new BMap.Marker(point);  // 创建标注
            //map.addOverlay(marker);               // 将标注添加到地图中

        }

        function loadScript() {
            var script = document.createElement("script");
            script.src = "http://api.map.baidu.com/api?v=2.0&ak=sMGTVmGogp0NIKsuLitY2GztkkrUiV8u&callback=initialize";//此为v2.0版本的引用方式
            // http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式
            document.body.appendChild(script);
        }

        // 不知为何点击无效
        function addMark(){
            var map = new BMap.Map("map");
            var point = new BMap.Point(121.491, 31.233);
            var marker = new BMap.Marker(point);        // 创建标注

            mp.centerAndZoom(point, 11);
            map.addOverlay(marker);                     // 将标注添加到地图中
            //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }

        window.onload = loadScript;
    </script>

</head>
<body>

<div id="map" style="width:500px;height:320px"></div>

<input type="button" value="添加mark"  onclick="addMark()"/>

</body>
</html>